<template>
  <div>
    <el-dialog top="5vh" title="物流信息" width="60%" center :close-on-click-modal="false" :visible.sync="visible" :before-close="close">
      <div v-loading="loading">
        <h3>包裹信息</h3>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand" align="center">
            <template slot-scope="scope">
              <el-table :data="scope.row.order_package_items" border>
                <el-table-column label="商品图片" align="center">
                  <template slot-scope="scoped">
                    <div>
                      <el-popover placement="top-start" trigger="hover">
                        <a :href="scoped.row.goods_img" target="_blank" title="查看最大化图片"><img :src="scoped.row.goods_img" style="width: 300px;height: 300px" /></a>
                        <img slot="reference" :src="scoped.row.goods_img" @click="$openImg(scoped.row.goods_img)"
                          style="width: 50px;height: 50px; cursor:pointer" />
                      </el-popover>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="goods_title" align="center">
                </el-table-column>
                <el-table-column label="价格" prop="sale_price" align="center">
                </el-table-column>
                <el-table-column label="属性" prop="sku_set_name" align="center">
                </el-table-column>
                <el-table-column label="发货数量" prop="number" align="center">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="包裹名称" align="center">
            <template slot-scope="scope"> <span>包裹{{ scope.$index + 1 }} <span v-if="scope.row.third_ship">(第三方供应链发货)</span></span> </template>
          </el-table-column>
          <el-table-column label="发货时间" prop="create_time" align="center">
          </el-table-column>
          <el-table-column label="快递名称" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.express.express_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="快递单号" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.express.logistic_code }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="updateShipments(scope.row)">修改</el-button>
                <el-button type="text" @click="viewLogistics(scope.row)">查看物流信息</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 物流详情 -->
    <goodStreamDetail @result="goodStreamVisible = false" v-if="goodStreamVisible" ref="goodStream"></goodStreamDetail>
    <!-- 发货 核销 -->
    <deliver-goods @result="result('deliverGoods')" v-if="deliverGoods" ref="deliverGoods"></deliver-goods>
  </div>
</template>

<script>
import orderService from '@/api/orderService.js'
import goodStreamDetail from './goodStreamDetail.vue'
// 发货
import deliverGoods from './deliver-goods.vue'
export default {
  components: {
    goodStreamDetail,
    deliverGoods
  },
  name: 'subpackageDetail',
  data () {
    return {
      visible: true,
      loading: false,
      tableData: [],
      goodStreamVisible: false, // 物流详情
      deliverGoods: false // 发货
    }
  },
  methods: {
    init (obj) {
      this.searchDetail(obj.id)
    },
    searchDetail (id) {
      this.loading = true
      orderService
        .subpackageGoodsDetail(id)
        .then(res => {
          console.log(res, 111)
          if (res.data && res.data.code == 200) {
            if (res.data.list.length) {
              this.tableData = res.data.list
            }
          } else {
            this.$message.error(res.data.msg)
          }
          this.loading = false
        })
        .catch(res => {
          this.loading = false
        })
    },
    /* 查看物流信息 */
    viewLogistics (item) {
      this.goodStreamVisible = true
      this.$nextTick(() => {
        this.$refs.goodStream.init(item)
      })
    },
    /**
     * 修改物流信息
     * */
    updateShipments (item) {
      this.deliverGoods = true
      this.$nextTick(() => {
        this.$refs.deliverGoods.init(item, 'update')
      })
    },
    close (e) {
      this.$emit('result')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  /deep/ .el-table__body {
    .el-table__expand-icon {
      font-size: 20px;

      .el-icon {
        margin-top: -10px;
        margin-left: -10px;
      }
    }
  }
}
</style>
